<template>
  <div class="xuanwei">
    <Navi :title="'选座购票'" :flexd="true" />
    <div class="box">
      <div class="wei">
        <div class="text">5</div>
        <div @click="fun(33)" class="white" id="33"></div>
        <div @click="fun(34)" class="white" id="34"></div>
        <div @click="fun(35)" class="red" id="35"></div>
        <div @click="fun(36)" class="red" id="36"></div>
        <div @click="fun(37)" class="white" id="37"></div>
        <div @click="fun(38)" class="white" id="38"></div>
        <div @click="fun(39)" class="white" id="39"></div>
        <div @click="fun(40)" class="white" id="40"></div>
        <div class="text">4</div>
        <div @click="fun(25)" class="white" id="25"></div>
        <div @click="fun(26)" class="white" id="26"></div>
        <div @click="fun(27)" class="white" id="27"></div>
        <div @click="fun(28)" class="white" id="28"></div>
        <div @click="fun(29)" class="white" id="29"></div>
        <div @click="fun(30)" class="white" id="30"></div>
        <div @click="fun(31)" class="white" id="31"></div>
        <div @click="fun(33)" class="white" id="33"></div>
        <div class="text">3</div>
        <div @click="fun(17)" class="white" id="17"></div>
        <div @click="fun(18)" class="white" id="18"></div>
        <div @click="fun(19)" class="white" id="19"></div>
        <div @click="fun(20)" class="white" id="20"></div>
        <div @click="fun(21)" class="white" id="21"></div>
        <div @click="fun(22)" class="white" id="22"></div>
        <div @click="fun(23)" class="white" id="23"></div>
        <div @click="fun(24)" class="white" id="24"></div>
        <div class="text">2</div>
        <div @click="fun(9)" class="white" id="9"></div>
        <div @click="fun(10)" class="white" id="10"></div>
        <div @click="fun(11)" class="white" id="11"></div>
        <div @click="fun(12)" class="white" id="12"></div>
        <div @click="fun(13)" class="white" id="13"></div>
        <div @click="fun(14)" class="red" id="14"></div>
        <div @click="fun(15)" class="red" id="15"></div>
        <div @click="fun(16)" class="white" id="16"></div>
        <div class="text">1</div>
        <div @click="fun(1)" class="white" id="1"></div>
        <div @click="fun(2)" class="white" id="2"></div>
        <div @click="fun(3)" class="white" id="3"></div>
        <div @click="fun(4)" class="white" id="4"></div>
        <div @click="fun(5)" class="white" id="5"></div>
        <div @click="fun(6)" class="white" id="6"></div>
        <div @click="fun(7)" class="white" id="7"></div>
        <div @click="fun(8)" class="white" id="8"></div>
      </div>
      <div class="pbox">
        <div class="ping"></div>
        <div class="ptext">{{ params.th }}</div>
      </div>
      <div class="xuan">
        <div class="xbox">
          <div class="white"></div>
          <p>可选</p>
        </div>
        <div class="xbox">
          <div class="red"></div>
          <p>已售</p>
        </div>
        <div class="xbox">
          <div class="green"></div>
          <p>已选</p>
        </div>
      </div>

      <div class="botbox">
        <div class="titbox">{{ params.title }}</div>
        <div class="timebox">{{ params.dt }}</div>
        <div class="acbox">
          <div class="abox">
            <div class="time">{{ params.tm }}</div>
            <div class="lei">{{ params.lang }}</div>
            <div class="sum">￥{{ params.price }}</div>
          </div>
        </div>
        <div class="btn">
          <van-button
            @click="goumai()"
            class="btn1"
            color="#FA2900"
            type="primary"
            block
            >提交购买</van-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Navi from "../components/Navi.vue";
export default {
  name: "XuanWei",
  components: {
    Navi,
  },
  data() {
    return {
      params: {
        dt: "",
        lang: "",
        price: "",
        th: "",
        title: "",
        tm: "",
      },
      sum: [],
      obj: {},
    };
  },
  created() {
    this.params = this.$route.params;
    
  },
  methods: {
    fun(e) {
      if (e === 14 || e === 15 || e === 35 || e === 36) {
        this.$toast("该座位已被选，请选择其他座位！");
        return;
      } else {
      }

      let w = document.getElementById(e);
      if (w.className === "green") {
        w.className = "white";
        
        let y = this.sum.filter(function (ele) {
          return ele != e;
        });
        this.sum = y;
        
        return;
      } else if (w.className === "red") {
        this.$toast("该座位已被选，请选择其他座位！");
        return;
      } else {
        w.className = "green";
        this.sum.push(e);
        
      }
    },
    goumai() {
      let loc = JSON.parse(localStorage.getItem("token") || "[]");
      
      if (loc.length === 0) {
        this.$toast("请先登录,跳转中...");
        setTimeout(() => {
          this.$router.push({ name: "Login" });
        }, 2000);
        return;
      } else {
        this.sum.forEach((v) => {
          
          let b = document.getElementById(v);
          
          b.className = "red";
          this.$toast("购买成功！正在跳转...");
          
          this.obj = {
            arr: this.sum,
          };
        });
        

        // //获取本地存储的聊天记录
        let localData = localStorage.getItem("obj");

        if (!localData) {
          localData = [];
        } else {
          localData = JSON.parse(localData);
        }
        let addList = {
          params: this.params,
          sum: this.sum,
        };
        localData.push(addList);
        localStorage.setItem("obj", JSON.stringify(localData));

        setTimeout(() => {
          this.$router.push({ name: "Piao" });
        }, 2000);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  width: 100%;
}
.wei {
  width: 100%;
  height: 210px;
  margin: 0 auto;
  .text {
    font-size: 15px;
    text-align: center;
    line-height: 42px;
    color: #999;
  }
  .white {
    background: url(../assets/img.png) 0 -2.5px / cover;
  }

  .red {
    background: url(../assets/img.png) 0 -84px / cover;
  }

  .green {
    background: url(../assets/img.png) 0 -44px / cover;
  }
}

.wei > div {
  width: 41px;
  height: 36px;
  margin-bottom: 6px;
  float: left;
}
.xuan {
  width: 100%;
  display: flex;
  padding-left: 100px;
  margin-top: 128px;
  box-sizing: border-box;
  .xbox {
    display: flex;
    margin-left: 5px;
    div {
      width: 31px;
      height: 26px;
      float: left;
      margin-top: 5px;
    }
  }
}

.botbox {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  .titbox {
    font-size: 18px;
    color: #444;
    margin: 10px 0;
  }
  .timebox {
    font-size: 13px;
    color: #666;
    margin-bottom: 15px;
  }
  .acbox {
    display: flex;
    overflow: scroll;
    .abox {
      width: 50px;
      padding: 5px 10px;
      background-color: #ffebeb;
      text-align: center;
      border-radius: 8px;
      margin-left: 10px;
      .time {
        font-size: 16px;
        color: #444;
      }
      .lei {
        font-size: 13px;
        color: #888;
        margin: 5px 0;
      }
    }
    .abox:first-child {
      margin-left: 0;
    }
    .abox > div {
      width: 50px;
    }
  }
}
.btn {
  margin-top: 10px;
}

.white {
  background: url(../assets/img.png) 0 -2.5px / cover;
}

.red {
  background: url(../assets/img.png) 0 -64px / cover;
}

.green {
  background: url(../assets/img.png) 0 -125px / cover;
}

.pbox {
  width: 100%;
  margin: 10px auto;
  .ping {
    width: 250px;
    height: 5px;
    background-color: #ddd;
    margin: 0 auto;
  }
  .ptext {
    width: 130px;
    height: 5px;
    color: #444;
    margin: 0 auto;
    text-align: center;
    font-size: 18px;
  }
}
</style>